<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    /*
      promise是解决异步的终极方案
             针对回调地狱
      三个状态 默认pending
              成功fulfilled    
              失败rejected

        语法:
        1. 创建一个promise对象
           // promise 本身就是承诺/允诺的意思  -> 未来发生的事 成功/失败 
           const p = new Promise((resolve, reject) => {
            //  一般情况下.promise内部封装的都是异步, 定时器/延时器/ajax请求
            resolve() 成功的时候调用的函数  -> 将promise的状态由pending 改成fulfiiled  
            reject()  失败的时候调用的函数  -> 将promise的状态由pending 改成rejected 
           } )
        2. 使用这个promise对象             
           p.then(res => {} ).catch(err => {}) 
           .then() 成功
           .catch() 失败
           只要调用了resolve()函数, 就会执行.then()中的代码
           只要调用了reject()函数, 就会执行.catch()中的代码
    */ 
     // 需求: 开一个延时器, 在延迟器结束后, 打印一个'你好'
     //  function fn() {
       //    setTimeout(() => {
         //     console.log('你好');
         //    }, 2000);
         //  }      
         //  fn()
         
    //  打印的东西, 不要写死 
    //  希望打印一个aa之后, 等两秒在打印一个bb, .....
    // function fn(callback) {
    //    setTimeout(() => {
    //      callback()
    //    }, 2000);
    //  }      
    //  fn(()=> {
    //    console.log('aa')
    //    fn(()=> {
    //     console.log('bb')
    //     fn(()=> {
    //       console.log('cc')
    //     })
    //   })
    //  })
    // 需求: 希望2s后打印一个aa之后, 2s后在打印一个bb, .....  
    // promise 优化
    // 将创建promise的过程封装到一个函数中
    function fn() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve() // 将来如果在使用promise的时候, 会走.then()中的代码, 另外也将promise的状态改成fulfiiled
        }, 2000);
      })
    }    
  // 1. 支持链式写法 .then().then().catch(() => 进行错误的捕获)  
  //  fn().then(() => {
  //   console.log('aa');
  //   // 必须在上一个.then()中返回一个promise, 才能继续往下调用
  //   return fn()
  //  }).then(() => {
  //    console.log('bb');
  //    return fn()
  //  }).then(() => {
  //    console.log('cc');
  //  })

  // 2. async + await 以同步的思维编写异步的代码
    async function getLog() {
      await fn()
      console.log('aa');

      await fn()
      console.log('bb');

      await fn()
      console.log('cc');
      //......
    }
    getLog()
  </script>
</body>
</html>